import Vue from 'vue'
import VueRouter from 'vue-router'

// 路由页面不能一次性全部打包到app.js中，
// 应该是用户看哪个页才去加载哪个页
// 用户刚进来，只能看到Login页面，因此默认情况下，
// 只打包Login页面。其它页都懒加载，点进去/跳过去才去加载，
// 这样就可以减少第一次打包app.js文件体积了，从而提高首页加载速度
import Login from '@/views/Login'

// 正常写法 -> 不是懒加载
// import Layout from '@/views/Layout'
// 懒加载写法 -> 跳过去，才加载这个js文件
const Layout = () =>
  import(/* webpackChunkName: "layout" */ '@/views/Layout')
const Home = () =>
  import(/* webpackChunkName: "home" */ '@/views/Home')
const Article = () =>
  import(/* webpackChunkName: "article" */ '@/views/Article')
const Publish = () =>
  import(/* webpackChunkName: "publish" */ '@/views/Publish')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/layout'// 重定向到首页
  },
  {
    // Login
    path: '/login',
    component: Login
  }, {
    // Layout
    path: '/layout',
    component: Layout,
    redirect: '/layout/home', // 重定向到首页
    children: [
      {
        path: 'home',
        component: Home
      }, {
        path: 'article',
        component: Article
      }, {
        path: 'publish',
        // component: () => import('@/views/Publish')
        component: Publish
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router
